<template>
    <el-pagination
            @size-change="handleSizeChange"
            class="pageDiv"
            :page-size=this.pageSize
            :total=this.total
            :pager-count='11'
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40]"
            @current-change="currentChange"
    >
    </el-pagination>
</template>

<script>
    export default {
        name: "AdminPage",
        data() {
            return {
                pageSize: 10
            }
        },
        props: {
            pagerCount: {
                type: Number,
                defult: 0
            },
            total: {
                type: Number,
                defult: 0
            }
        },
        watch: {},
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.$emit('updateData');
            },
            currentChange(event) {
                this.$emit('currentChange', event)
            }
        }
    }
</script>

<style scoped>
    .pageDiv {
        text-align: center;
        background: #ffffff;
        color: #99BBE8;
        font-size: 2em;
    }
</style>
